<template>
	<div class="account" @touchmove="toDie($event)" @touchstart="getStart($event)" @touchend="getEnd($event)">
		<h1 style="display: none;">{{this.$store.state.accleft}}</h1>
		<div class="acc">
		<mytop></mytop>
		<message></message>
		<friend></friend>
		<skin></skin>
			<div class="bot">
				<mybottom></mybottom>
			</div>
		</div>
	</div>
</template>

<script>
	import mytop from "@/components/account/mytop.vue"
	import message from "@/components/account/message.vue"
	import friend from "@/components/account/friend.vue"
	import skin from "@/components/account/skin.vue"
	import mybottom from "@/components/account/mybottom.vue"
	
	export default {
		name:"account",
		data(){
			return {
				start:"",
				end:""
			}
		},
		components:{
			mytop,
			message,
			friend,
			skin,
			mybottom
		},
		methods:{
			toCome(){
				var acc = document.querySelector(".acc");
				var bot = document.querySelector(".bot")
				acc.style.left=this.$store.state.accleft;
				bot.style.left=this.$store.state.accleft;
//				console.log(this.$store.state.accleft)
			},
			toDie(e){
				if(this.start-this.end>=50){
					this.$store.commit("setAccleft","-95%");
				}
				
		},
		getStart(e){
//			console.log(e);
			this.start = e.changedTouches[0].clientX;
			
		},
		getEnd(e){
//			console.log(e);
			this.end = e.changedTouches[0].clientX;
//			console.log(this.end);
		}
		
	},
		mounted(){
			this.toCome();
		},
		updated(){
			this.toCome();
		}
	}	
</script>

<style lang="scss" scoped="">
		.account{
			overflow-y: auto;
			position: relative;
			z-index: 100;
			.acc{
				height: 95%;
				width: 80%;
				/*background: skyblue;*/
				position: fixed;
				top: 0;
				transition: all 1s;
				overflow-y: auto;
				background: #fff;
			}
			.bot{
				position: fixed;
				    bottom: 0;
    				width: 100%;
    				transition: all 1s;
				
			}
		}
		ul{
		font-size: 12px;
		color: #000;
		text-align: left;
		li{
			height: 25px;
			width: 80%;
			margin:15px 12px 0px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span{
				margin-left: 12px;
				display: inline-block;
			}
			.over{
				text-overflow: ellipsis;
				width: 69px;
			    overflow: hidden;
			    white-space: nowrap;
			}
			.rightLi{
				display: flex;
				justify-content: flex-start;
				.smallFont{
					transform: scale(0.7);
					color: dimgray;
					text-spacing: 2px;
					text-overflow: ellipsis;
					width: 69px;
				    overflow: hidden;
				    white-space: nowrap;
				}
				.er{
					width: 20px;
					float: right;
					img{
						width: 100%;
					}
				}
			}
		}
		li:nth-child(3){
			margin:9px 0px -7px 12px;
		}
	}
</style>